
<template>
  <a-modal
    :title="'工艺库'"
    :visible="true"
    width="70%"
    :footer="null"
    @cancel="reset"
  >
    <div class="background">
      <a-card style="margin-bottom: 10px">
        <a-row>
          <a-col :span="24">
            <a-form
              layout="inline"
              :form="form"
              @submit="handleSubmit"
            >
              <a-form-item label="工艺部位">
                <a-select
                  style="width: 180px"
                  show-search
                  placeholder="请选择工艺部位"
                  v-model="partName"
                  @change="changePart"
                  allow-clear
                >
                  <a-select-option
                    :value="item.name"
                    v-for="(item,index) in partList"
                    :key="index"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="工艺做法">
                <a-select
                  style="width: 180px"
                  show-search
                  placeholder="请选择工艺做法"
                  v-model="operName"
                  @change="changeOper"
                  allow-clear
                >
                  <a-select-option
                    :value="item.name"
                    v-for="(item,index) in operList"
                    :key="index"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <!-- <a-form-item label="品牌">
                <a-select
                  style="width: 180px"
                  placeholder="请选择品牌"
                  v-model="brand"
                  allow-clear
                >
                  <a-select-option
                    :value="item.id"
                    v-for="(item,index) in brandList"
                    :key="index"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="小类">
                <a-select
                  style="width: 180px"
                  placeholder="请选择小类"
                  v-model="xl"
                  allow-clear
                >
                  <a-select-option
                    :value="item.id"
                    v-for="(item,index) in xlList"
                    :key="index"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item> -->
              <a-form-item>
                <a-button
                  type="primary"
                  html-type="submit"
                >搜索</a-button>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>

      </a-card>
      <a-card>
        <a-table
          :row-selection="{ selectedRowKeys: parentSelectedRowKeys, onSelect:onSelect}"
          :rowKey="record=>record.id"
          v-if="dataSource.length"
          :defaultExpandAllRows="true"
          :loading="loading"
          :columns="columns"
          :data-source="dataSource"
          :pagination="pagination"
          @change="handleTableChange"
        >
          <!-- <template
            slot="craftRelationDec"
            slot-scope="txt, record"
          >
            <a-tag
              v-for="(item,index) in record.craftRelationDec"
              :key="index"
              :color="'blue'"
              style="margin-bottom:5px"
            >
              {{item}}
            </a-tag>

          </template> -->
          <a-table
            slot="expandedRowRender"
            slot-scope="record"
            :columns="innerColumns"
            :data-source="record.craftStep"
            :pagination="false"
          >
            <template
              slot="imgurl"
              slot-scope="txt, record"
            >
              <img
                style="width:150px;height: 100px;object-fit: scale-down;"
                :src="record.imgurl"
                @click="prevImg(record.imgurl)"
                :alt="record.imgurl"
              >
            </template>
          </a-table>
        </a-table>
      </a-card>
      <div class="info-action">
        <a-button
          type="primary"
          style="margin-left: 8px"
          @click="submit"
        >
          提交
        </a-button>
      </div>
    </div>
    <a-modal
      v-model="showBigImg"
      title="图片预览"
      @ok="showBigImg = false"
      :footer="null"
      width="60%"
      :mask="true"
    >
      <div class="previmg">
        <img :src="prevImageUrl" />
      </div>
    </a-modal>
  </a-modal>

</template>

<script>
import { getList, getDictChildList } from '@api/rd/index'
const innerColumns = [
  {
    title: '图片',
    scopedSlots: { customRender: 'imgurl' }
  },
  {
    title: '描述',
    width: 400,
    dataIndex: 'description'
  }
]
const columns = [
  {
    title: '编号',
    width: 200,
    dataIndex: 'code'
  },
  {
    title: '工艺部位',
    width: 100,
    dataIndex: 'partName'
  },
  {
    title: '工艺做法',
    width: 100,
    dataIndex: 'operName'
  }
  // {
  //   title: '关联属性',
  //   scopedSlots: { customRender: 'craftRelationDec' }
  // }
]
export default {
  components: {},
  props: {
    billList: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      columns,
      innerColumns,
      showAdd: false,
      showDetail: false,
      form: this.$form.createForm(this),
      loading: false,
      type: '',
      dataSource: [],
      partList: [],
      backList: [],
      parentSelectedRowKeys: [],
      operList: [],
      prevImageUrl: '',
      showBigImg: false,
      xlList: [],
      brandList: [],
      dict: {},
      partName: undefined,
      partId: undefined,
      operName: undefined,
      operId: undefined,
      brand: undefined,
      xl: undefined,
      pagination: {
        total: 0,
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['10', '20', '30', '40'],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: total => `共 ${total} 条记录`,
        itemRender: (current, type, originalElement) => {
          if (type === 'prev') {
            return <a>上一页</a>
          } else if (type === 'next') {
            return <a>下一页</a>
          }
          return originalElement
        }
      }
    }
  },
  mounted() {
    this.getPartList()
    this.getOperList()
    this.getBrandList()
  },
  methods: {
    handleTableChange(pagination) {
      this.pagination = pagination
      this.dataSource = []
      this.loadData()
    },
    reset() {
      this.$emit('closePart')
    },
    submit() {
      this.$emit('closePart', this.backList)
    },
    async getPartList() {
      const params = {
        name: 'GY_PART'
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.partList = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取部位列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取部位列表失败！')
      }
    },
    onSelect(record, selected, selectedRows, nativeEvent) {
      if (selected == true) {
        this.parentSelectedRowKeys.push(record.id)
        this.backList = selectedRows
      } else {
        this.parentSelectedRowKeys = this.parentSelectedRowKeys.filter(item => record.id != item)
        this.backList = this.backList.filter(item => record.id != item.id)
      }
    },
    prevImg(url) {
      this.prevImageUrl = url
      this.showBigImg = true
    },
    changePart(value) {
      this.partList.map(item => {
        if (item.name == value) {
          this.partId = item.code
        }
      })
    },
    changeOper(value) {
      this.operList.map(item => {
        if (item.name == value) {
          this.operId = item.code
        }
      })
    },
    async getOperList() {
      const params = {
        name: 'GY_OPER'
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.operList = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取做法列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取做法列表失败！')
      }
    },
    async getBrandList() {
      const params = {
        name: 'BRAND'
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.brandList = res.data
          this.brandList.map(item => {
            if (this.billList.brand == item.name) {
              this.brand = item.code
            }
          })
          this.getXlList()
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取品牌列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取品牌列表失败！')
      }
    },

    async getXlList() {
      const params = {
        name: 'XL'
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.xlList = res.data
          console.log(this.billList.xl)
          this.xlList.map(item => {
            if (this.billList.xl == item.name) {
              console.log(item)
              this.xl = item.code
            }
          })
          console.log(this.xl)
          this.loadData()
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取小类列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取小类列表失败！')
      }
    },
    handleSubmit(e) {
      e.preventDefault()
      this.loadData(1)
    },
    async loadData(key) {
      this.loading = true
      if (key) {
        this.pagination.current = 1
      }
      const params = {
        current: this.pagination.current,
        size: this.pagination.pageSize
      }
      if (this.partName) {
        params.partId = this.partId
      }
      if (this.operName) {
        params.operId = this.operId
      }
      if (this.brand) {
        params.brand = this.brand
      }
      if (this.xl) {
        params.xl = this.xl
      }
      try {
        const res = await getList('lib', params)
        if (res.code == 200) {
          this.dataSource = res.data.records
          this.pagination.total = res.data.total
          if (this.dataSource.length) {
            this.dataSource.map(item => {
              if (item.craftRelationDec != '') {
                item.craftRelationDec = item.craftRelationDec.split(',')
              }
            })
          }
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取工艺库列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取工艺库列表失败！')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
<style lang="less" scoped>
@media print {
  @page {
    size: portrait;
  }
}
.background {
  background: transparent;
}
.ant-modal-body {
  display: flex;
  justify-content: space-between;
}
.info-action {
  display: flex;
  margin-top: 10px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  // margin-bottom: 20px;
}
.previmg {
  display: flex !important;
  justify-content: center;
  align-items: center;
}
.previmg img {
  width: 500px;
}
</style>
<style>
/* @media print {
  html {
    zoom: 70%;
  }
} */
</style>